<template>
  <!-- 代码生成器 -->
  <ms-info center-scroll :dialog-visible="dialogVisible" @show="showDialog" @ok="handleSaveForm"
    @close="handleCloseDialog" :title="title">
    <template slot="content">
      <el-form v-loading="loading" ref="formValid" :model="form" :rules="rules" size="medium"
        label-width="80px" label-position="left">
        <el-form-item label="学生姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入学生姓名" :maxlength="200" clearable
            :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker v-model="form.birthday" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            :style="{width: '100%'}" placeholder="请选择出生日期" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="上传组件" prop="fileUpload">
          <ms-upload :limit="2" list-type="picture-card" file-path="test" :file-size="2" size-unit="MB"
            ref="filefileUpload" @fileList="getFile"></ms-upload>
        </el-form-item>
        <el-form-item label="性别" prop="sex" required>
          <ms-dict v-model="form.sex" type="radio" dict-type="sex" />
        </el-form-item>
        <el-form-item label="富文本编辑器" prop="detail" required>
          <ms-editor v-model="form.detail" :visibile="dialogVisible"/>
        </el-form-item>
      </el-form>
    </template>
  </ms-info>
</template>

<script>
// import MsDialog from '@/common/dialog'
// 组件
import MsUpload from '@/common/upload/components'
import MsDict from '@/common/dict/components'
import MsEditor from '@/common/editor/components'
// 混入
import tip from '@/mixins/tip'
import { checkEditor } from '@/utils/valid'
const preFixUrl = '/work/studentTest/'
export default {
  components: {
    // MsDialog,
    MsUpload,
    MsDict,
    MsEditor
  },
  mixins: [tip],
  data() {
    return {
      apiUrl: {
        get: `${preFixUrl}getById`,
        save: `${preFixUrl}save`
      },
      rules: {
        name: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' },
          { max: 16, min: 2, message: '学生姓名长度不正确', trigger: 'blur' },
          { pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/, message: '请输入正确格式学生姓名', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        birthday: [
          { required: true, message: '请输入生日', trigger: 'blur' }
        ],
        detail: [
          { required: true, message: '请输入个人详情', validator: checkEditor, trigger: 'blur' }
        ]
      }
    }
  }
}
</script>
